<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Azure Cosmos DB 策略配置测试题</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        .container {
            display: flex;
            margin: 20px 0;
        }
        .json-segments, .answer-area {
            flex: 1;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 0 10px;
        }
        .json-segments {
            background-color: #f5f5f5;
        }
        .segment {
            padding: 10px;
            margin: 5px 0;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: move;
        }
        .answer-area {
            min-height: 300px;
            background-color: white;
        }
        .answer-btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
        }
        .answer-btn:hover {
            background-color: #45a049;
        }
        .answer-section {
            display: none;
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-left: 5px solid #4CAF50;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }
        .highlight {
            background-color: #ffffcc;
        }
        .drop-target {
            display: inline-block;
            min-width: 50px;
            min-height: 20px;
            border: 1px dashed #999;
            background-color: #f9f9f9;
            padding: 2px 5px;
        }
    </style>
</head>
<body>
    <h1>Azure Cosmos DB 策略配置测试题</h1>
    
    <div class="question">
        <p><strong>QUESTION NO: 95 DRAG DROP</strong></p>
        <p>You are developing a new page for a website that uses Azure Cosmos DB for data storage. The feature uses documents that have the following format:</p>
        
        <h3>图一</h3>
        <pre>{
    "name": "John",
    "city": "Seattle"
}</pre>
        
        <p>You must display data for the new page in a specific order. You create the following query for the page:</p>
        
        <h3>图二</h3>
        <pre>SELECT *
FROM People p
ORDER BY p.name, p.city DESC</pre>
        
        <p>You need to configure a Cosmos DB policy to the support the query.</p>
        <p>How should you configure the policy? To answer, drag the appropriate JSON segments to the correct locations. Each JSON segment may be used once, more than once, or not at all.</p>
        <p><em>NOTE: Each correct selection is worth one point.</em></p>
    </div>

    <div class="container">
        <div class="json-segments" id="jsonSegments">
            <h3>JSON segments</h3>
            <div class="segment" draggable="true" data-value="orderBy">orderBy</div>
            <div class="segment" draggable="true" data-value="sortOrder">sortOrder</div>
            <div class="segment" draggable="true" data-value="ascending">ascending</div>
            <div class="segment" draggable="true" data-value="descending">descending</div>
            <div class="segment" draggable="true" data-value="compositeIndexes">compositeIndexes</div>
        </div>
        
        <div class="answer-area" id="answerArea">
            <h3>Answer Area</h3>
            <pre id="jsonTemplate">{
    "automatic": "Consistent",
    "includedPaths": [
        {
            "path": "/*"
        }
    ],
    "excludedPaths": [],
    "<span class="drop-target" id="w-target">______</span>": [
        {
            "path": "/name",
            "order": "descending"
        },
        {
            "path": "/city",
            "order": "<span class="drop-target" id="blank-target">______</span>"
        }
    ]
}</pre>
        </div>
    </div>

    <button class="answer-btn" onclick="showAnswer()">查看答案</button>

    <div id="answer-section" class="answer-section">
        <h3>答案及说明</h3>
        <p>正确的JSON配置应该是：</p>
        <pre class="highlight">{
    "automatic": "Consistent",
    "includedPaths": [
        {
            "path": "/*"
        }
    ],
    "excludedPaths": [],
    "compositeIndexes": [
        {
            "path": "/name",
            "order": "ascending"
        },
        {
            "path": "/city",
            "order": "descending"
        }
    ]
}</pre>
        <p><strong>说明:</strong></p>
        <ol>
            <li>空白1为"compositeIndexes"，因为查询需要复合索引支持</li>
            <li>对于name字段，应该使用"ascending"排序，因为查询中是ORDER BY p.name（默认升序）</li>
            <li>对于city字段，应该使用"descending"排序，因为查询中明确指定了ORDER BY p.city DESC</li>
            <li>复合索引的顺序必须与查询中的ORDER BY顺序一致</li>
        </ol>
        <p>这样配置后，Cosmos DB就能高效地支持这个带有排序条件的查询。</p>
    </div>

    <script>
        // 拖拽功能实现
        const segments = document.querySelectorAll('.segment');
        let draggedItem = null;
        
        segments.forEach(segment => {
            segment.addEventListener('dragstart', function() {
                draggedItem = this;
                setTimeout(() => {
                    this.style.display = 'none';
                }, 0);
            });
            
            segment.addEventListener('dragend', function() {
                setTimeout(() => {
                    this.style.display = 'block';
                    draggedItem = null;
                }, 0);
            });
        });
        
        // 设置可放置的目标
        const dropTargets = document.querySelectorAll('.drop-target');
        
        dropTargets.forEach(target => {
            target.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#e6f7ff';
            });
            
            target.addEventListener('dragleave', function() {
                this.style.backgroundColor = '#f9f9f9';
            });
            
            target.addEventListener('drop', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#f9f9f9';
                
                if (draggedItem) {
                    this.textContent = draggedItem.dataset.value;
                }
            });
        });

        function showAnswer() {
            document.getElementById('answer-section').style.display = 'block';
        }
    </script>
</body>
</html>
